<!--
 * @Author: YMJ
 * @Date: 2020-10-30 10:47:06
-->
<template>
  <div>
    <!-- 列表 -->
    <tab-list
      ref="list"
      :searchs="searchs"
      :list-hedar="listHedar"
      :params="params"
      :api-function="apiFunction"
      other-show
      @init-params="initParams"
      @add-list="openEditBox()"
    >
      <el-image
        slot="slideImage"
        slot-scope="scope"
        style="width: 50px; height: 50px"
        fit="fit"
        :src="scope.value.slideImage"
        :preview-src-list="[scope.value.slideImage]"
      />
      <span
        slot="authStatus"
        slot-scope="scope"
        :style="`color:${
          scope.value.authStatus === '2' ? '#909399' :
          scope.value.authStatus === '1' ? '#67C23A' : '#F56C6C'
        }`"
      >
        {{
          scope.value.authStatus === '2' ? '已下架' :
          scope.value.authStatus === '1' ? '已上架' : '未上架'
        }}
      </span>
      <span slot="slideLocation" slot-scope="scope">
        {{
          scope.value.slideLocation === '1' ? '发现首页' : 
          scope.value.slideLocation === '2' ? '引导页' : 
          '网址跳转'
        }}
      </span>
      <template slot="operate" slot-scope="scope">
        <el-button type="text" size="small" @click="openEditBox(scope.value.slideId)">编辑</el-button>
        <el-button
          type="text"
          size="small"
          @click="slideFrame(!(scope.value.authStatus === '1'), scope.value.slideId)"
        >
          {{ scope.value.authStatus === '1' ? '下架' : '上架' }}
        </el-button>
      </template>
    </tab-list>
    <el-dialog
      :title="`${detail?'修改':'添加'}幻灯片`"
      :visible.sync="toastShow"
      width="40%"
      :close-on-click-modal="false"
    >
      <edit-form
        ref="form"
        :rules="rules"
        :edit-list="editList"
        :form="form"
        @on-submit="addOrEdit()"
        @uploade="(url, config) => {form.slideImage = url;fileConfig = config}"
      >
        <div slot="linkType">
          <div>
            <el-radio v-model="form.jumpType" :label="1">内部跳转</el-radio>
            <el-select
              v-model="form2.internalType"
              class="mr1 w1"
              :disabled="!(form.jumpType == '1')"
              placeholder="请选择"
            >
              <el-option
                v-for="item in pages2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-input
              v-model="form2.internalVal"
              class="w1"
              :disabled="!(form.jumpType == '1')"
              placeholder="请输入"
            />
          </div>
          <div class="mt1">
            <el-radio v-model="form.jumpType" :label="2">网址跳转</el-radio>
            <el-input
              v-model="form2.jumpLink"
              :disabled="!(form.jumpType == '2')"
              class="w1"
              placeholder="请输入"
            />
          </div>
        </div>
      </edit-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="$refs.form.ruleFrom()">确 定</el-button>
        <el-button @click="toastShow = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 组件
import tabList from '@/components/admin/tab-list.vue'
import editForm from '@/components/admin/edit-form.vue'
// 公共方法
import { asyncApiFun, openMessageBox, initEditList } from '@/utils/utils'
// 接口
import { operationSlide, slideFrame, slideDetail, slideEdit } from '@/api/operate.js'
// 页面配置
import { listHedar, searchs, editList, rules } from './config/slide.config.js'
export default {
  components: {
    tabList,
    editForm
  },
  data() {
    return {
      fileConfig: {},
      toastShow: false,
      editList,
      searchs,
      rules,
      pages2: [
        {
          value: '1',
          label: '话题'
        }
      ],
      form: {},
      form2: {
        jumpLink: '',
        // slideLocation: '',
        internalType:'',
        internalVal: ''
      },
      params: {},
      listHedar,
      apiFunction: operationSlide,
      detail: null
    }
  },
  watch: {
    'form.jumpType'(val, oldVal) {
      if (val === 1) {
        this.form2.jumpLink = ''
      } else if (val === 2) {
        this.form2.slideLocation = ''
        this.form2.internalVal = ''
      }
    }
  },
  methods: {
    // 上下架
    slideFrame(status, id) {
      const _content = status ? '上架后，幻灯片默认排序为1，是否确认？' : '下架后，幻灯片将不在用户端可见，是否确认？'
      const _title = status ? '上架幻灯片' : '下架幻灯片'
      openMessageBox({
        content: _content,
        title: _title
      }, async boole => {
        if (boole) {
          const [res] = await asyncApiFun(slideFrame, { id, status })
          if (res) this.$refs.list.getList()
        }
      })
    },
    // 打开新增或者编辑弹窗
    openEditBox(id) {
      this.$refs.form && this.$refs.form.removeImageUrl()
      this.getDetail(id)
      this.toastShow = true
    },
    // 获取城市详情
    async getDetail(id) {
      let _detail = null
      if (id) {
        const [res] = await asyncApiFun(slideDetail, id)
        if (res) _detail = res.data
      }
      this.detail = _detail
      // 重置编辑框数据
      const _data = initEditList(this.editList, this.detail, this.form2)
      this.form = _data._form
      this.form2 = _data._form2
      this.$nextTick(() => {
        !this.detail && this.$refs.form && this.$refs.form.resetForm()
      })
    },
    async addOrEdit() {
      const params = {
        ...this.form
      }
      if (params.slideType !== '0') {
        return this.$message.error('当前仅用户端能够添加幻灯片')
      }
      
      Object.keys(this.form2).forEach(key => {
        if (this.form2[key]) {
          params[key] = this.form2[key]
        }
      })
      if (this.detail) params.slideId = this.detail.slideId
      const [res] = await asyncApiFun(slideEdit, params, this.fileConfig)
      if (res) {
        this.$refs.list.getList()
        this.toastShow = false
        this.$message.success(`${this.detail ? '修改' : '新增'}成功`)
      }
    },
    initParams(param) {
      this.params = param
    }
  }
}
</script>

<style lang="scss" scoped>
.mt1 {
  margin-top: 10px;
}
.mr1 {
  margin-right: 10px;
}
.w1 {
  width: 30%
}
</style>
